<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
    <script src="./js/_index.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    
</head>
<body>
    <div id="header">

        <div class="logo">
            <img src="./images/logo.png" alt="">
        </div>
        <div class="btn">
            <a href="#" class="fangda"><img src="./images/fangdajing.png" alt=""></a>
            <input type="text" placeholder="商品搜索" class="txt" value="">
            <ul class="list" style=" border-left: 1px #000 solid;border-bottom: 1px #000 solid;border-right: 1px #000 solid;">
                <!-- <li class="next"></li> -->
            </ul>

            <div class="btn1">
                <span><a href="">登录</a></span>
                |
            <span><a href="">注册</a></span>

        </div>
            
        
            
        </div>

        
 
        <div class="nav">
            <ul>
            <li><a href="">首页</a></li>
            <li><a href="">生活家电</a></li>
            <li class="e"><a href="">大铺床品</a>
             <div class="e1">

             </div>
             <div class="e11">
                 <div id="e111">
                     <span>
                <a href="" style=" 
                    
                    font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">床品件套</a>
                   &nbsp;&nbsp;&nbsp; 
                   <a href="" class="etop" style="
                    font-size: 12px;
                    padding: 0px 3px;
                    white-space: nowrap;
                    margin: 4px 0px;
                    color: #6B6B6B;">婚庆件套</a>
                    &nbsp;&nbsp;&nbsp;<a href="" class="etop"style="
                    font-size: 12px;
                    padding: 0px 3px;
                    white-space: nowrap;
                    margin: 4px 0px;
                    color: #6B6B6B;">件套</a>
                    &nbsp;&nbsp;&nbsp;<a href="" class="etop" style="
                    font-size: 12px;
                    padding: 0px 3px;
                    white-space: nowrap;
                    margin: 4px 0px;
                    color: #6B6B6B;">床单/床笠</a>
                   &nbsp;&nbsp;&nbsp; <a href="" class="etop"style="
                    font-size: 12px;
                    padding: 0px 3px;
                    white-space: nowrap;
                    margin: 4px 0px;
                    color: #6B6B6B;" >枕巾/枕套</a>
                    &nbsp;&nbsp;&nbsp;<a href="" class="etop"style="
                    font-size: 12px;
                    padding: 0px 3px;
                    white-space: nowrap;
                    margin: 4px 0px;
                    color: #6B6B6B;">被罩</a>
                    &nbsp;&nbsp;&nbsp;<a href=""class="etop" style="
                    font-size: 12px;
                    padding: 0px 3px;
                    white-space: nowrap;
                    margin: 4px 0px;
                    color: #6B6B6B;">靠垫/靠垫套</a>
                </span>
                
                <span>
                    <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">被子枕头</a>
                        &nbsp;&nbsp;&nbsp;<a href="" class="etop"style="
                        font-size: 12px;
                        padding: 0px 3px;
                        white-space: nowrap;
                        margin: 4px 0px;
                        color: #6B6B6B;">被子</a>
                        &nbsp;&nbsp;&nbsp;<a href=""class="etop" style="
                        font-size: 12px;
                        padding: 0px 3px;
                        white-space: nowrap;
                        margin: 4px 0px;
                        color: #6B6B6B;">枕头</a>
                        &nbsp;&nbsp;&nbsp;<a href="" class="etop" style="
                        font-size: 12px;
                        padding: 0px 3px;
                        white-space: nowrap;
                        margin: 4px 0px;
                        color: #6B6B6B;">床垫</a>
                        &nbsp;&nbsp;&nbsp;<a href=""class="etop" style="
                        font-size: 12px;
                        padding: 0px 3px;
                        white-space: nowrap;
                        margin: 4px 0px;
                        color: #6B6B6B;" >夏凉被</a>
                        
                    </span>
                    <span>
                        <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">夏凉床品</a>
                            &nbsp;&nbsp;&nbsp;<a href=""class="etop" style="
                            font-size: 12px;
                            padding: 0px 3px;
                            white-space: nowrap;
                            margin: 4px 0px;
                            color: #6B6B6B;"> 老粗布系列</a>
                            &nbsp;&nbsp;&nbsp;<a href="" class="etop"style="
                            font-size: 12px;
                            padding: 0px 3px;
                            white-space: nowrap;
                            margin: 4px 0px;
                            color: #6B6B6B;"> 亚麻系列</a>
                           &nbsp;&nbsp;&nbsp; <a href="" class="etop" style="
                            font-size: 12px;
                            padding: 0px 3px;
                            white-space: nowrap;
                            margin: 4px 0px;
                            color: #6B6B6B;"> 蔺草席</a>
                           &nbsp;&nbsp;&nbsp; <a href=""class="etop" style="
                            font-size: 12px;
                            padding: 0px 3px;
                            white-space: nowrap;
                            margin: 4px 0px;
                            color: #6B6B6B;" > 文章</a>
                           
                        </span>               
                     </div>
             </div>
        </li>
            <li class="e"><a href="">毛巾浴巾</a>
                <div class="e1">

                </div>
                <div class="e11">
                    <div id="e111">
                        <span>
                   <a href="" style=" 
                       
                       font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">毛巾浴巾</a>
                      &nbsp;&nbsp;&nbsp; 
                      <a href="" class="etop"class="etop" style="
                       font-size: 12px;
                       padding: 0px 3px;
                       white-space: nowrap;
                       margin: 4px 0px;
                       color: #6B6B6B;">毛巾</a>
                       &nbsp;&nbsp;&nbsp;<a href=""class="etop" style="
                       font-size: 12px;
                       padding: 0px 3px;
                       white-space: nowrap;
                       margin: 4px 0px;
                       color: #6B6B6B;">方巾</a>
                       &nbsp;&nbsp;&nbsp;<a href="" class="etop" style="
                       font-size: 12px;
                       padding: 0px 3px;
                       white-space: nowrap;
                       margin: 4px 0px;
                       color: #6B6B6B;">浴巾浴袍</a>
                   
                   </span>
                   
                   <span>
                       <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">地巾地毯</a>
                           &nbsp;&nbsp;&nbsp;<a href="" class="etop"style="
                           font-size: 12px;
                           padding: 0px 3px;
                           white-space: nowrap;
                           margin: 4px 0px;
                           color: #6B6B6B;">地巾地毯</a>
                           
                           
                       </span>
                       
                        </div>
                </div>
            </li>
            <li class="e"><a href="">拖鞋袜子</a>
                <div class="e1">

                </div>
                <div class="e11">
                    <div id="e111">
                        <span>
                   <a href="" style=" 
                       
                       font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">男士袜子</a>
                     
                   </span>
                   
                   <span>
                       <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">女士袜子</a>
                           
                       </span>
                       <span>
                           <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">家具拖鞋</a>
                              
                              
                           </span>    
                           <span>
                            <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">浴室拖鞋</a>
                               
                               
                            </span>                
                        </div>
                </div>
            </li>
            <li class="e"><a href="">家具服饰</a>
                <div class="e1">

                </div>
                <div class="e11">
                    <div id="e111">
                        <span>
                   <a href="" style=" 
                       
                       font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">家居服饰</a>
                    
                   </span>
                   
                   <span>
                       <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">家居服</a>
                           
                       </span>
                       <span>
                           <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">T恤/背心</a>
                              
                           </span>    
                           <span>
                            <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">围巾</a>
                               
                            </span>              
                        </div>
                </div>
            </li>
            <li class="e"><a href="">生活日用</a>
               
            </li>
            <li class="e"><a href="">内衣内裤</a>
                <div class="e1">

                </div>
                <div class="e11">
                    <div id="e111">
                        <span>
                   <a href="" style=" 
                       
                       font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">女士内衣</a>
                      &nbsp;&nbsp;&nbsp; 
                      <a href="" class="etop" style="
                       font-size: 12px;
                       padding: 0px 3px;
                       white-space: nowrap;
                       margin: 4px 0px;
                       color: #6B6B6B;">内裤</a>
                       &nbsp;&nbsp;&nbsp;<a href=""class="etop" style="
                       font-size: 12px;
                       padding: 0px 3px;
                       white-space: nowrap;
                       margin: 4px 0px;
                       color: #6B6B6B;">文胸</a>
                       &nbsp;&nbsp;&nbsp;<a href=""  class="etop"style="
                       font-size: 12px;
                       padding: 0px 3px;
                       white-space: nowrap;
                       margin: 4px 0px;
                       color: #6B6B6B;">保暖内衣</a>
                     
                   </span>
                   
                   <span>
                       <a href="" style="font-size: 14px;  margin-left: 5px;  color: #6B6B6B;     font-weight: bold;">男士内裤</a>
                          
                       </span>
                       
                        </div>
                </div>
            </li>
            <li><a href="">婴童用品</a></li>        
        </ul>
        </div>
    </div>
   
    

    <script>
        let oTxt = document.querySelector('.txt')
        let oUl = document.querySelector('.list')
    
        
       
        //给input绑定事件
        oTxt.addEventListener('input', function () {
            // 清空内容
            oUl.innerHTML = ' '
            // 定义的函数必须是全局
            window.show = function (res) {
                let arr = res.g
                arr.forEach(function (ele, index) {
                    let str = `<li class='next'><a onclick="displayData('${ele.q}')">${ele.q}</a></li>`
                    let oLi = document.querySelector('.next')
                    oUl.innerHTML += str
                    // console.log(oLi)
                    
                    
                
                })
                  
            }
           
           let s = document.createElement('script')
           s.src = `https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1451,32439,32356,32328,32046,32395,32405,32115,26350,32503,22157&wd=${oTxt.value}&csor=2&pwd=cheng%20l&cb=show&_=1597281559085`
           document.body.appendChild(s)
        })
       function displayData(str){
            oTxt.value = str
        }
    </script>
    
    
</body>
</html>